<script setup>
import { ref } from 'vue';
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';

const router = useRouter()
const role = ref('USER')
const formTitle = ref('欢迎注册后台管理系统')
const toLogin = () => router.push({ name: 'Login' })
</script>

<template>
  <div class="content">
    <div class="main">
      <div class="left-login-img"><img src="@/assets/images/login.png" alt="LoginImg"></div>
      <div class="right-login-form">
        <el-form>
          <div class="form-title">{{ formTitle }}</div>
          <el-form-item><el-input placeholder="请输入账号" :prefix-icon="User"></el-input></el-form-item>
          <el-form-item><el-input placeholder="请输入密码" :prefix-icon="Lock"></el-input></el-form-item>
          <el-form-item><el-input placeholder="请确认密码" :prefix-icon="Lock"></el-input></el-form-item>
          <el-radio-group v-model="role"><el-radio label="USER">用户</el-radio><el-radio label="ADMIN">管理员</el-radio></el-radio-group>
          <el-form-item><el-button type="success" class="register-btn">注 册</el-button></el-form-item>
          <div class="plus"> <div class="register-tip">已经有账号了?请<span class="tip" @click="toLogin">登录</span></div> </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0f9876;
  .main {
    display: flex;
    width: 50%;
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
    .left-login-img { flex: 1; img { width: 100%; } }
    .right-login-form {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-form {
        width: 80%;
        .form-title {
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 20px;
        }
        .captcha-div { display: flex; }
        .captcha { flex: 1; height: 36px; }
        .register-btn { width: 100%; }
        .plus {
          display: flex;
          .tip { color: #0f9876; cursor: pointer; }
          .register-tip { flex: 1; }
          .forget-password { flex: 1; text-align: right; }
        }
      }
    }
  }
}
</style>

